<template>
	<div class="deviceOEE picking zy-content">
		<div class="searchBox search-box-layout">
			<Row :gutter="24">
				<Col span="6">
					<div>
						<p class="label">{{ $t('equipmentscrapped.Location') }}</p>
						<div class="ipt">
							<!-- <Cascader :value.sync="searchParams.workShop" :data="orgList"/> -->
							<Cascader
								clearable
								:data="orgList"
								v-model="searchParams.workShop"
								change-on-select
								:placeholder="$t('common.PleaseSelect')"
								@on-change="workShopChange"
							></Cascader>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('equipCheck.SerialNo') }}</p>
						<div class="ipt">
							<Select
								v-model="searchParams.deviceMId"
								filterable
								clearable
								:placeholder="`${$t('common.selectInfo')}${$t('equipCheck.SerialNo')}`"
								:remote-method="remoteMethodDeviceMId"
							>
								<Option v-for="item of devNoList" :value="item.deviceMId" :key="item.deviceMId" :label="item.deviceMId + '-' + item.deviceName">
								</Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('equipmentscrapped.AssetNo') }}</p>
						<div class="ipt">
							<Select
								v-model="searchParams.assetCode"
								filterable
								clearable
								:placeholder="`${$t('common.selectInfo')}${$t('equipmentscrapped.AssetNo')}`"
								:remote-method="remoteMethodAssetsNo"
							>
								<Option v-for="item of devNoList" :value="item.assetCode" :key="item.assetCode" :label="item.assetCode + '-' + item.deviceName">
								</Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('equipmentscrapped.EquipmentNo') }}</p>
						<div class="ipt">
							<Select
								v-model="searchParams.deviceNo"
								filterable
								label-in-value
								clearable
								:remote-method="searchDevice"
								:placeholder="$t('maintenance.EquipmentNo')"
							>
								<Option v-for="(item, index) of deviceList" :value="item.deviceNo" :key="index" :label="item.deviceNo"> </Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">{{ $t('SystemConfig.shift') }}</p>
						<div class="ipt">
							<Select v-model="searchParams.shiftId" clearable :placeholder="`${$t('common.selectInfo')}${$t('SystemConfig.shift')}`">
								<Option v-for="(item, index) of productionShiftList" :value="item.id" :label="item.shift" :key="index"> </Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="6">
					<div>
						<p class="label">{{ $t('common.Date') }}</p>
						<div class="ipt">
							<DatePicker
								type="daterange"
								v-model="timeList"
								split-panels
								placement="bottom"
								transfer
								:placeholder="`${$t('common.selectInfo')}${$t('common.Date')}`"
								:clearable="false"
							>
							</DatePicker>
						</div>
					</div>
				</Col>
				<Col span="4">
					<div>
						<p class="label">设备类别</p>
						<div class="ipt">
							<Select
								v-model="searchParams.deviceCategory"
								filterable
								clearable
								:placeholder="`${$t('common.selectInfo')}设备类别`"
							>
								<Option v-for="val in deviceType" :value="val.value" :key="val" :label="val.value"></Option>
							</Select>
						</div>
					</div>
				</Col>
				<Col span="5">
					<div class="t-c">
						<p class="label hide-label">--</p>
						<div class="ipt">
							<Button type="primary" class="search-btn" @click="search()">{{ $t('common.Query') }} </Button>
							<Button class="reset-btn" @click="changeNum()">{{ $t('common.reset') }} </Button>
						</div>
					</div>
				</Col>
			</Row>
		</div>

		<div class="deviceOEEBox">
			<div class="oneBox">
				<!-- <div class="echartBox">
          <div class="boxtitle">
            <span>NEE</span>
          </div>
          <div class="echartItem1" id="synthesisNEE"></div>
          <div class="echartItem2">
            <span>OEE：{{ oeeNum.oee }}%</span>
            <span>U：{{ oeeNum.u }}%</span>
            <div class="help" @click="helpModal(1,1)">
              <Icon style="font-size: 20px;font-weight: bold" type="ios-information-circle-outline"/>
            </div>
          </div>
        </div> -->
				<div class="echartBox">
					<div class="boxtitle">
						<span>OEE</span>
					</div>
					<div class="echartItem1" id="synthesisOEE"></div>
					<div class="echartItem2">
						<span>{{ $t('时间稼动率') }}:{{ oeeNum.timeCropMovement }}%</span>
						<span>{{ $t('性能稼动率') }}:{{ oeeNum.performanceCropMovement }}%</span>
						<span>{{ $t('合格率') }}:{{ oeeNum.passRate }}%</span>
						<!-- <div class="help" @click="helpModal(2,1)">
              <Icon style="font-size: 20px;font-weight: bold" type="ios-information-circle-outline"/>
            </div> -->
					</div>
				</div>
				<!-- <div class="echartBox">
          <div class="boxtitle">
            <span>{{ $t("使用率U") }}</span>
          </div>
          <div class="echartItem" id="opentime1"></div>
        </div> -->

				<div class="echartBox">
					<div class="boxtitle">
						<span>时间稼动率</span>
					</div>
					<div class="echartItem" id="opentime"></div>
				</div>
				<div class="echartBox">
					<div class="boxtitle">
						<span>性能稼动率</span>
					</div>
					<div class="echartItem" id="natureopenRate"></div>
				</div>
				<div class="echartBox">
					<div class="boxtitle">
						<span>{{ $t('合格品率1') }}</span>
					</div>
					<div class="echartItem" id="qualified"></div>
				</div>
			</div>
			<div class="twoBox">
				<div class="boxtitle">
					<img width="60px" src="~images/equipment/top.png" alt />
					<span>{{ $t('OEE排行') }}</span>
				</div>
				<div class="rowtitle">
					<div style="width: 15%">{{ $t('排名') }}</div>
					<div style="width: 65%">{{ $t('设备编号') }}</div>
					<div style="width: 20%">OEE</div>
				</div>
				<div class="coltitle">
					<div class="list" v-for="(item, index) of devList" :key="index">
						<div style="width: 15%" class="item">
							<!-- <div v-if="index===0"><img width="16px" src="~images/equipment/gold.png" alt/></div>
              <div v-else-if="index===1"><img width="16px" src="~images/equipment/silver.png" alt/></div>
              <div v-else-if="index===2"><img width="16px" src="~images/equipment/copper.png" alt/></div> -->
							<div class="" v-if="index + 1 === 1">🥇</div>
							<div class="" v-else-if="index + 1 === 2">🥈</div>
							<div class="" v-else-if="index + 1 === 3">🥉</div>
							<div class="num" v-else>{{ index + 1 }}</div>
						</div>
						<div style="width: 65%" class="item">{{ item.deviceNo }}</div>
						<div style="width: 20%" class="item">{{ item.oee }}%</div>
					</div>
				</div>
			</div>
		</div>
		<div class="bottomBox">
			<div class="echartBox">
				<div class="boxtitle">
					<span>{{ $t('OEE趋势图') }}</span>
				</div>
				<div class="echartItem" id="oeeTrend"></div>
			</div>
		</div>
		<!-- <div class="bottomBox" style="margin-top: 5px;">
      <div class="echartBox">
        <div class="boxtitle">
          <span>{{ $t("维修效率") }}</span>
        </div>
        <div class="echartItem" id="oeeTrend1"></div>
      </div>
    </div> -->
		<!-- <oeeHelpOrgChart ref="oeeHelpOrgChart"/> -->
		<!-- <kpiDetailModel ref="kpiDetailModel"></kpiDetailModel> -->
	</div>
</template>

<script>
import * as echarts from 'echarts';
import { getDeviceListinfo } from '@/api/maintenance';
import { getDictData } from '@/api/index.js';
import 'vue-orgchart/dist/style.min.css';
import 'font-awesome/css/font-awesome.min.css';
// import oeeHelpOrgChart from './component/oeeHelpOrgChart'
// import kpiDetailModel from './component/kpiDetailModel'
import recursion from '@/util/recursion';

let chart1 = null;
let chart2 = null;
let chart3 = null;
let chart4 = null;
let chart5 = null;
let chart6 = null;
export default {
	name: 'deviceOEE',
	components: {
		// oeeHelpOrgChart,
		// kpiDetailModel,
	},
	data() {
		return {
			deviceList: [],
			productionShiftList: [],
			timeList: [this.$moment(new Date()).subtract(7, 'days').format('YYYY-MM-DD'), this.$moment(new Date()).format('YYYY-MM-DD')],
			hierarchyList: [],
			searchParams: {},
			devList: [],
			oeeNum: {
				passRate: 0,
				timeCropMovement: 0,
				oee: 0,
				performanceCropMovement: 0,
			},
			devNoList: [],
			helpShowF: false,
			addtitle: '',
			chartType: '',
			chartParams: {},
			orgList: [],
			deviceType: [],
		};
	},
	mounted() {
		this.changeNum();
		this.getOrgList();
		getDictData('设备类别').then((res) => {
			this.deviceType = res.data;
		});
	},
	methods: {
		workShopChange(val) {
			let workShop = '';
			if (val && val.length) {
				workShop = val.at(-1);
			} else {
				this.productionShiftList = [];
				this.searchParams.shiftId = '';
				return;
			}
			this.axios({
				method: 'get',
				url: '/dms/oee-board/selectShiftByWorkShop',
				params: { workShop },
			}).then((res) => {
				if (res.code === 200) {
					this.productionShiftList = res.data;
				}
			});
		},
		getOrgList() {
			this.axios({
				method: 'get',
				url: '/basic/organization/findListByToken',
				params: { level: 1 },
			}).then((res) => {
				if (res.code === 200) {
					const obj = {
						label: 'name',
						value: 'code',
						children: 'children',
					};
					this.orgList = recursion.convertTree(res.data, obj);
				} else {
					this.$Message.warning({ content: res.msg, duration: 6, closable: true });
				}
			});
		},
		// onCartSelect(chart, type) {
		//   chart.on('click', (prams) => {
		//     this.chartParams.type = type
		//     this.chartParams.day = prams.name
		//     this.$refs.kpiDetailModel.show(this.chartParams)
		//   })
		// },
		searchDevice(data) {
			this.axios({
				method: 'post',
				url: '/dms/device/page',
				data: {
					deviceNo: data,
					pageNum: 1,
					pageSize: 200,
				},
			}).then((res) => {
				if (res.code === 200) {
					this.deviceList = res.data.records;
				}
			});
		},
		nodeTemplate(data) {
			console.log(data);
		},
		helpModal(type, form) {
			if (form == 1) {
				this.$refs.oeeHelpOrgChart.show(type);
			} else {
			}
			// this.helpShowF = true
		},
		remoteMethodAssetsNo(query) {
			if (query) {
				this.getAssetsNo(query);
			}
		},
		async getAssetsNo(item) {
			let param = {
				pageSize: 200,
				assetCode: item,
				pageNum: 1,
				// workShop: "",
			};
			let { data, code, msg } = await getDeviceListinfo(param);
			if (code === 200) {
				this.devNoList = data.records;
			}
		},
		remoteMethodDeviceMId(query) {
			if (query) {
				this.getDeviceMId(query);
			}
		},
		async getDeviceMId(item) {
			let param = {
				pageSize: 200,
				deviceMId: item,
				pageNum: 1,
				// workShop: "",
			};
			let { data, code, msg } = await getDeviceListinfo(param);
			if (code === 200) {
				this.devNoList = data.records;
			}
		},
		search() {
			this.changeNum();
		},
		changeNum() {
			let params = JSON.parse(JSON.stringify(this.searchParams));
			if (this.timeList[1] && (this.$moment(this.timeList[1]) - this.$moment(this.timeList[0])) / (24 * 3600 * 1000) <= 7) {
				params.startTime = this.$moment(this.timeList[0]).format('YYYY-MM-DD');
				params.endTime = this.$moment(this.timeList[1]).format('YYYY-MM-DD');
			} else {
				this.$Message.warning({ content: '日期间隔不能超过7天', duration: 6, closable: true });
				return false;
			}
			if (this.searchParams.workShop && this.searchParams.workShop.length) {
				params.workShop = this.searchParams.workShop.at(-1);
			} else delete params.workShop;
			this.chartParams = params;
			this.getPerformanceChartInstrument(params); //oee绩效图-仪表盘
			this.getPerformanceChartTimeCropMovement(params); //时间稼动率
			this.getDeviceTop(params);
		},
		getPerformanceChartInstrument(params) {
			this.axios({
				method: 'post',
				url: '/dms/oee-board/performanceChartInstrument',
				data: { ...params },
			}).then((res) => {
				if (res.code == 200) {
					const { performanceCropMovement, timeCropMovement, oee, passRate } = res.data;
					this.oeeNum = { performanceCropMovement, timeCropMovement, passRate, oee };
					this.synthesisOEEEchart(oee);
				} else this.$Message.error(res.msg);
			});
		},
		getPerformanceChartTimeCropMovement(params) {
			this.axios({
				method: 'post',
				url: '/dms/oee-board/performanceChartTimeCropMovement',
				data: { ...params },
			}).then((res) => {
				if (res.code == 200) {
					const data = res.data;
					// this.oeeNum = {performanceCropMovement, timeCropMovement, passRate, oee}
					const xData = data.map((item) => {
						return item.days.substring(5, 10);
					});
					// 实际运行时间
					const runningDuration = data.map((item) => item.runningDuration);
					// 计划运行时间
					const shiftDuration = data.map((item) => item.shiftDuration);
					// 开动率
					const timeCropMovement = data.map((item) => item.timeCropMovement);
					this.opentimeEchart(xData, runningDuration, shiftDuration, timeCropMovement); //时间开动率
					this.getPerformanceChartPerformanceCropMovement(res); //时间稼动率
					this.getPerformanceChartGoodRate(res); //良品率
					this.getOeePerformanceChart(res); //趋势图
				}
			});
		},
		getPerformanceChartPerformanceCropMovement(res) {
			const data = res.data;
			const xData = data.map((item) => {
				return item.days.substring(5, 10);
			});
			// 实际运行时间
			const runningDuration = data.map((item) => item.runningDuration);
			// 理论运行时间
			const theoreticalRunningTime = data.map((item) => item.theoreticalRunningTime);
			// 开动率
			const performanceCropMovement = data.map((item) => item.performanceCropMovement);
			this.natureopenRateEchart(xData, theoreticalRunningTime, runningDuration, performanceCropMovement); //时间开动率
		},
		getPerformanceChartGoodRate(res) {
			const data = res.data;
			const xData = data.map((item) => {
				return item.days.substring(5, 10);
			});
			const output = data.map((item) => item.output);
			const goodNum = data.map((item) => item.goodNum);
			const passRate = data.map((item) => item.passRate);
			this.qualifiedEchart(xData, output, goodNum, passRate); //时间开动率
		},
		getOeePerformanceChart(res) {
			const data = res.data;
			const xData = data.map((item) => {
				return item.days.substring(5, 10);
			});
			const timeCropMovement = data.map((item) => item.timeCropMovement);
			const oee = data.map((item) => item.oee);
			const passRate = data.map((item) => item.passRate);
			const performanceCropMovement = data.map((item) => item.performanceCropMovement);
			this.oeeTrendEchart(xData, timeCropMovement, performanceCropMovement, passRate, oee); //性能开动率
		},
		//排行榜接口
		getDeviceTop(params) {
			this.axios({
				method: 'post',
				url: '/dms/oee-board/performanceChartRanking',
				data: { ...params },
			}).then((res) => {
				if (res.code == 200) {
					this.devList = res.data;
				}
			});
		},
		// synthesisNEEEchart(total) {
		//   let myChart = echarts.init(document.getElementById("synthesisNEE"));
		//   myChart.setOption({
		//     title: {
		//       // 主标题样式
		//       textStyle: {
		//         fontSize: 20,
		//       },
		//       text: 'NEE',
		//       left: 'center',
		//       top: '68%'
		//     },
		//     series: [
		//       {
		//         type: 'gauge',
		//         radius: '80%',
		//         center: ['50%', '60%'],
		//         progress: {
		//           show: true,
		//           width: 14
		//         },
		//         axisLine: {
		//           lineStyle: {
		//             width: 14
		//           }
		//         },
		//         axisTick: {
		//           show: false
		//         },
		//         splitLine: {
		//           length: 10,
		//           lineStyle: {
		//             width: 2,
		//             color: '#999'
		//           }
		//         },
		//         pointer: {
		//           show: false
		//         },
		//         title: {
		//           show: false
		//         },
		//         detail: {
		//           valueAnimation: true,
		//           fontSize: 42,
		//           offsetCenter: [0, '0%'],
		//           formatter: function (value) {
		//             return value + '%';
		//           },
		//         },
		//         data: [
		//           {
		//             value: total,
		//           }
		//         ]
		//       }
		//     ]
		//   });
		//   window.addEventListener("resize", function () {
		//     myChart.resize(); //myChart指自己定义的echartsDom对象
		//   });
		// },
		synthesisOEEEchart(total) {
			let myChart = echarts.init(document.getElementById('synthesisOEE'));
			myChart.setOption({
				title: {
					// 主标题样式
					textStyle: {
						fontSize: 20,
					},
					text: 'OEE',
					left: 'center',
					top: '68%',
				},
				series: [
					{
						type: 'gauge',
						radius: '80%',
						center: ['50%', '60%'],
						progress: {
							show: true,
							width: 14,
						},
						axisLine: {
							lineStyle: {
								width: 14,
							},
						},
						axisTick: {
							show: false,
						},
						splitLine: {
							length: 10,
							lineStyle: {
								width: 2,
								color: '#999',
							},
						},
						pointer: {
							show: false,
						},
						title: {
							show: false,
						},
						detail: {
							valueAnimation: true,
							fontSize: 42,
							offsetCenter: [0, '0%'],
							formatter: function (value) {
								return value + '%';
							},
						},
						data: [
							{
								value: total,
							},
						],
					},
				],
			});
			window.addEventListener('resize', function () {
				myChart.resize(); //myChart指自己定义的echartsDom对象
			});
		},

		opentimeEchart(xData, yData1, yData2, yData3) {
			if (chart1 != null) {
				chart1.dispose();
			}
			chart1 = echarts.init(document.getElementById('opentime'));
			chart1.setOption({
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999',
						},
					},
				},
				grid: {
					//图的边距
					top: '30%', //左边距
					left: '6%', //左边距
					right: '4%', //右边距
					bottom: '4%', //下边距
					containLabel: true,
				},
				legend: {
					data: [this.$t('计划运行时间'), this.$t('实际运行时间'), this.$t('时间稼动率')],
					padding: [15, 20, 0, 0],
					x: 'right',
				},
				xAxis: [
					{
						type: 'category',
						data: xData,
						axisPointer: {
							type: 'shadow',
						},
					},
				],
				yAxis: [
					{
						type: 'value',
						name: this.$t('时间') + '(min)',
						min: 0,
						axisLabel: {
							formatter: '{value}',
						},
						splitLine: {
							show: false,
						},
					},
					{
						type: 'value',
						name: this.$t('时间稼动率'),
						min: 0,
						max: 100,
						interval: 20,
						axisLabel: {
							formatter: '{value}%',
						},
					},
				],
				series: [
					{
						name: this.$t('计划运行时间'),
						type: 'bar',
						barWidth: 10,
						// stack: 'one',
						tooltip: {
							valueFormatter: function (value) {
								return value + 'min';
							},
						},
						data: yData2,
					},

					{
						name: this.$t('实际运行时间'),
						type: 'bar',
						barWidth: 10,
						// stack: 'one',
						tooltip: {
							valueFormatter: function (value) {
								return value + 'min';
							},
						},
						data: yData1,
					},
					{
						name: this.$t('开动率'),
						type: 'line',
						yAxisIndex: 1,
						tooltip: {
							valueFormatter: function (value) {
								return value + '%';
							},
						},
						data: yData3,
					},
				],
			});
			// this.onCartSelect(chart1, 'a');
			window.addEventListener('resize', function () {
				chart1.resize(); //myChart指自己定义的echartsDom对象
			});
		},
		opentime1Echart(xData, yData1, yData2, yData3) {
			if (chart2 != null) {
				chart2.dispose();
			}
			chart2 = echarts.init(document.getElementById('opentime1'));
			chart2.setOption({
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999',
						},
					},
				},
				grid: {
					//图的边距
					top: '30%', //左边距
					left: '6%', //左边距
					right: '4%', //右边距
					bottom: '4%', //下边距
					containLabel: true,
				},
				legend: {
					data: ['SPT', 'POT', 'U'],
					padding: [15, 20, 0, 0],
					x: 'right',
				},
				xAxis: [
					{
						type: 'category',
						data: xData,
						axisPointer: {
							type: 'shadow',
						},
					},
				],
				yAxis: [
					{
						type: 'value',
						name: this.$t('时间') + '(min)',
						min: 0,
						axisLabel: {
							formatter: '{value}',
						},
						splitLine: {
							show: false,
						},
					},
					{
						type: 'value',
						name: 'U',
						min: 0,
						max: 100,
						interval: 20,
						axisLabel: {
							formatter: '{value}%',
						},
					},
				],
				series: [
					{
						name: 'SPT',
						type: 'bar',
						barWidth: 10,
						// stack: 'one',
						tooltip: {
							valueFormatter: function (value) {
								return value + 'min';
							},
						},
						data: yData2,
					},
					{
						name: 'POT',
						type: 'bar',
						barWidth: 10,
						// stack: 'one',
						tooltip: {
							valueFormatter: function (value) {
								return value + 'min';
							},
						},
						data: yData1,
					},
					{
						name: 'U',
						type: 'line',
						yAxisIndex: 1,
						tooltip: {
							valueFormatter: function (value) {
								return value + '%';
							},
						},
						data: yData3,
					},
				],
			});
			// this.onCartSelect(chart2, 'u');
			window.addEventListener('resize', function () {
				chart2.resize(); //myChart指自己定义的echartsDom对象
			});
		},
		natureopenRateEchart(xData, yData1, yData2, yData3) {
			if (chart3 != null) {
				chart3.dispose();
			}
			chart3 = echarts.init(document.getElementById('natureopenRate'));
			chart3.setOption({
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999',
						},
					},
				},
				grid: {
					//图的边距
					top: '30%', //左边距
					left: '6%', //左边距
					right: '4%', //右边距
					bottom: '4%', //下边距
					containLabel: true,
				},
				legend: {
					data: [this.$t('实际运行时间'), this.$t('理论运行时间'), this.$t('开动率')],
					padding: [15, 20, 0, 0],
					x: 'right',
				},
				xAxis: [
					{
						type: 'category',
						data: xData,
						axisPointer: {
							type: 'shadow',
						},
					},
				],
				yAxis: [
					{
						type: 'value',
						name: this.$t('时间') + '(min)',
						min: 0,
						axisLabel: {
							formatter: '{value}',
						},
						splitLine: {
							show: false,
						},
					},
					{
						type: 'value',
						name: this.$t('开动率'),
						min: 0,
						// max: 100,
						// interval: 20,
						axisLabel: {
							formatter: '{value}%',
						},
					},
				],
				series: [
					{
						name: this.$t('实际运行时间'),
						type: 'bar',
						barWidth: 10,
						// stack: 'one',
						tooltip: {
							valueFormatter: function (value) {
								return value + 'min';
							},
						},
						data: yData2,
					},
					{
						name: this.$t('理论运行时间'),
						type: 'bar',
						barWidth: 10,
						// stack: 'one',
						tooltip: {
							valueFormatter: function (value) {
								return value + 'min';
							},
						},
						data: yData1,
					},
					{
						name: this.$t('开动率'),
						type: 'line',
						yAxisIndex: 1,
						tooltip: {
							valueFormatter: function (value) {
								return value + '%';
							},
						},
						data: yData3,
					},
				],
			});
			// this.onCartSelect(chart3, 'p');
			window.addEventListener('resize', function () {
				chart3.resize(); //myChart指自己定义的echartsDom对象
			});
		},
		qualifiedEchart(xData, yData1, yData2, yData3) {
			if (chart4 != null) {
				chart4.dispose();
			}
			chart4 = echarts.init(document.getElementById('qualified'));
			chart4.setOption({
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999',
						},
					},
				},
				grid: {
					//图的边距
					top: '30%', //左边距
					left: '6%', //左边距
					right: '4%', //右边距
					bottom: '4%', //下边距
					containLabel: true,
				},
				legend: {
					data: [this.$t('生产数'), this.$t('良品数'), this.$t('合格率')],
					padding: [15, 20, 0, 0],
					x: 'right',
				},
				xAxis: [
					{
						type: 'category',
						data: xData,
						axisPointer: {
							type: 'shadow',
						},
					},
				],
				yAxis: [
					{
						type: 'value',
						name: this.$t('生产数量'),
						min: 0,
						axisLabel: {
							formatter: '{value}',
						},
						splitLine: {
							show: false,
						},
					},
					{
						type: 'value',
						name: this.$t('合格率'),
						min: 0,
						max: 100,
						interval: 20,
						axisLabel: {
							formatter: '{value}%',
						},
					},
				],
				series: [
					{
						name: this.$t('生产数'),
						type: 'bar',
						barWidth: 10,
						// stack: 'one',
						tooltip: {
							valueFormatter: function (value) {
								return value + '';
							},
						},
						data: yData1,
					},
					{
						name: this.$t('良品数'),
						type: 'bar',
						barWidth: 10,
						// stack: 'one',
						tooltip: {
							valueFormatter: function (value) {
								return value + '';
							},
						},
						data: yData2,
					},
					{
						name: this.$t('合格率'),
						type: 'line',
						yAxisIndex: 1,
						tooltip: {
							valueFormatter: function (value) {
								return value + '%';
							},
						},
						data: yData3,
					},
				],
			});
			// this.onCartSelect(chart4, 'q');
			window.addEventListener('resize', function () {
				chart4.resize(); //myChart指自己定义的echartsDom对象
			});
		},
		oeeTrendEchart(xData, yData1, yData2, yData3, yData4) {
			if (chart5 != null) {
				chart5.dispose();
			}
			chart5 = echarts.init(document.getElementById('oeeTrend'));
			chart5.setOption({
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999',
						},
					},
				},
				grid: {
					//图的边距
					top: '30%', //左边距
					left: '4%', //左边距
					right: '4%', //右边距
					bottom: '4%', //下边距
					containLabel: true,
				},
				legend: {
					data: [this.$t('时间开动率A'), this.$t('性能开动率P'), this.$t('合格品率1'), 'OEE'],
					padding: [15, 20, 0, 0],
					x: 'right',
				},
				xAxis: [
					{
						type: 'category',
						data: xData,
						axisPointer: {
							type: 'shadow',
						},
					},
				],
				yAxis: [
					{
						type: 'value',
						// name: this.$t('生产数量'),
						min: 0,
						// max: 100,
						// interval: 20,
						axisLabel: {
							formatter: '{value}%',
						},
						// splitLine: {
						//   show: false
						// },
					},
					// {
					//   type: 'value',
					//   // name: this.$t('合格率'),
					//   min: 0,
					//   max: 100,
					//   interval: 20,
					//   axisLabel: {
					//     formatter: '{value}%'
					//   }
					// }
				],
				series: [
					{
						name: this.$t('时间开动率A'),
						type: 'bar',
						barWidth: 10,
						tooltip: {
							valueFormatter: function (value) {
								return value + '%';
							},
						},
						data: yData1,
					},
					{
						name: this.$t('性能开动率P'),
						type: 'bar',
						barWidth: 10,
						tooltip: {
							valueFormatter: function (value) {
								return value + '%';
							},
						},
						data: yData2,
					},
					{
						name: this.$t('合格品率1'),
						type: 'bar',
						barWidth: 10,
						tooltip: {
							valueFormatter: function (value) {
								return value + '%';
							},
						},
						data: yData3,
					},
					{
						name: 'OEE',
						type: 'line',
						// yAxisIndex: 1,
						tooltip: {
							valueFormatter: function (value) {
								return value + '%';
							},
						},
						data: yData4,
					},
				],
			});
			// this.onCartSelect(chart5,'q')
			window.addEventListener('resize', function () {
				chart5.resize(); //myChart指自己定义的echartsDom对象
			});
		},
		efficiencyEchart(list) {
			if (chart6 != null) {
				chart6.dispose();
			}

			let xData = [];
			let maintenanceEfficiency = [];
			let planRunTime = [];
			let realRunTime = [];
			let shutdownTime = [];

			for (let i = 0; i < list.length; i++) {
				xData.push(list[i].scheduleDate);
				maintenanceEfficiency.push(list[i].maintenanceEfficiency);
				planRunTime.push(list[i].planRunTime);
				realRunTime.push(list[i].realRunTime);
				shutdownTime.push(list[i].shutdownTime);
			}

			chart6 = echarts.init(document.getElementById('oeeTrend1'));
			chart6.setOption({
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						crossStyle: {
							color: '#999',
						},
					},
				},
				grid: {
					//图的边距
					top: '30%', //左边距
					left: '4%', //左边距
					right: '4%', //右边距
					bottom: '4%', //下边距
					containLabel: true,
				},
				legend: {
					data: [this.$t('停机时长'), this.$t('实际运行时长'), this.$t('计划运行时长'), this.$t('维修效率')],
					padding: [15, 20, 0, 0],
					x: 'right',
				},
				xAxis: [
					{
						type: 'category',
						data: xData,
						axisPointer: {
							type: 'shadow',
						},
					},
				],
				yAxis: [
					{
						type: 'value',
						// name: this.$t('生产数量'),
						min: 0,
						// max: 100,
						// interval: 20,
						axisLabel: {
							formatter: '{value}',
						},
						// splitLine: {
						//   show: false
						// },
					},

					{
						type: 'value',
						// name: this.$t('合格率'),
						min: 0,
						max: 100,
						interval: 20,
						axisLabel: {
							formatter: '{value}%',
						},
					},
				],
				series: [
					{
						name: this.$t('停机时长'),
						type: 'bar',
						barWidth: 10,
						tooltip: {
							valueFormatter: function (value) {
								return value;
							},
						},
						data: shutdownTime,
					},
					{
						name: this.$t('实际运行时长'),
						type: 'bar',
						barWidth: 10,
						tooltip: {
							valueFormatter: function (value) {
								return value;
							},
						},
						data: realRunTime,
					},
					{
						name: this.$t('计划运行时长'),
						type: 'bar',
						barWidth: 10,
						tooltip: {
							valueFormatter: function (value) {
								return value;
							},
						},
						data: planRunTime,
					},
					{
						name: this.$t('维修效率'),
						type: 'line',
						yAxisIndex: 1,
						tooltip: {
							valueFormatter: function (value) {
								return value + '%';
							},
						},
						data: maintenanceEfficiency,
					},
				],
			});
			// this.onCartSelect(chart5,'q')
			window.addEventListener('resize', function () {
				chart6.resize(); //myChart指自己定义的echartsDom对象
			});
		},
	},
};
</script>

<style scoped lang="scss">
.item-desc {
	font-size: 14px;
	font-weight: 400;
	color: #00142d;
	line-height: 20px;
}

.deviceOEE {
	.bottomBox {
		.echartBox {
			height: 350px;
			width: 100%;
			background: #fff;
			position: relative;
			display: flex;
			border-radius: 8px;
			overflow: hidden;

			.boxtitle {
				position: absolute;
				top: 0;
				width: 100%;
				height: 40px;
				background: rgb(248, 248, 248);
				//border: 1px solid #d6dbdf;
				padding-left: 16px;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				span {
					font-size: 16px;
					color: #333;
				}

				//&:before {
				//  content: "";
				//  position: absolute;
				//  width: 7px;
				//  height: 20px;
				//  border-left: 1px dashed #187bdb;
				//  border-right: 1px dashed #187bdb;
				//  top: 9px;
				//  left: 12px;
				//}
			}

			.echartItem {
				width: 100%;
				height: 100%;
			}

			.echartItem1 {
				width: 60%;
				height: 100%;
			}

			.echartItem2 {
				width: 40%;
				height: 100%;
				padding: 80px 0px 30px 0px;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				align-items: flex-start;
				position: relative;

				.help {
					position: absolute;
					right: 10px;
					top: -3px;
					font-size: 27px;
					cursor: pointer;
				}

				span {
					font-size: 20px;
				}
			}
		}
	}

	.deviceOEEBox {
		width: 100%;
		height: 795px;
		margin: 15px 0 5px 0;
		display: flex;
		justify-content: space-between;

		.oneBox {
			width: 74.5%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-content: space-between;

			.echartBox {
				height: 49.4%;
				width: 49.7%;
				background: #fff;
				position: relative;
				display: flex;
				border-radius: 8px;
				overflow: hidden;

				.boxtitle {
					position: absolute;
					top: 0;
					width: 100%;
					height: 40px;
					background: rgb(248, 248, 248);
					//border: 1px solid #d6dbdf;
					padding-left: 16px;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					span {
						font-size: 16px;
						color: #333;
					}

					//&:before {
					//  content: "";
					//  position: absolute;
					//  width: 7px;
					//  height: 20px;
					//  border-left: 1px dashed #187bdb;
					//  border-right: 1px dashed #187bdb;
					//  top: 9px;
					//  left: 12px;
					//}
				}

				.echartItem {
					width: 100%;
					height: 100%;
				}

				.echartItem1 {
					width: 60%;
					height: 100%;
				}

				.echartItem2 {
					width: 40%;
					height: 100%;
					padding: 80px 0px 30px 0px;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					align-items: flex-start;
					position: relative;

					.help {
						position: absolute;
						right: 10px;
						top: -3px;
						font-size: 27px;
						cursor: pointer;
					}

					span {
						font-size: 20px;
					}
				}
			}
		}

		.twoBox {
			width: 25%;
			height: 100%;
			background: #fff;
			position: relative;
			border-radius: 8px;
			overflow: hidden;

			.boxtitle {
				// position: absolute;
				// top: 0;
				background: url(~images/equipment/bg.png) no-repeat;
				background-size: cover;
				width: 100%;
				height: 126px;
				// border: 1px solid #d6dbdf;
				display: flex;
				justify-content: center;
				align-items: center;

				span {
					font-size: 18px;
					color: #fff;
					font-weight: bold;
				}
			}

			.rowtitle {
				padding: 10px 0;
				display: flex;
				text-align: center;
				background: #fff;

				div {
					font-size: 14px;
					color: #999;
				}
			}

			.coltitle {
				background: #fff;
				height: 625px;
				overflow-y: auto;

				&::-webkit-scrollbar {
					width: 0px;
					height: 0px;
				}

				.list {
					display: flex;
					text-align: center;

					.item {
						margin: 15px 0;
						font-size: 14px;
						text-align: -webkit-center;

						.num {
							width: 25px;
							height: 25px;
							line-height: 25px;
							background-color: rgba(24, 123, 219, 0.1);
							border-radius: 50%;
							color: #187bdb;
							text-align: center;
						}

						// color: #999;
					}
				}
			}
		}
	}
}
</style>

<style lang="scss">
.orgchart .node.focused,
.orgchart .node:hover {
	background-color: #fff;
}

.orgchart .node .content {
	height: 60px;
	white-space: break-spaces;
	display: flex;
	justify-content: center;
	align-items: center;
}

.orgchart .node {
	width: 150px;
}
</style>
